<template>
  <div id="employeesdetails">
    <div id="employeesdetails-header">
      <el-button type="text" @click="back">返回</el-button>
    </div>
    <div id="employeesdetails-main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block"><el-avatar :size="200" :src="circleUrl" /></div>
              </div>
            </el-col>
          </el-row>

          <div class="employeesdetails-center">
            <div>你好：{{ employeeId.realname }}</div>
            <div>海纳百川，有容乃大！！！</div>
          </div>
          <div>联系方式：{{ employeeId.telephone }}</div>
          <div>状态：{{ employeeId.status }}</div>
          <div>地址：{{ employeeId.province }} &nbsp; {{ employeeId.city }}</div><hr>

        </el-tab-pane>
        <el-tab-pane label="订单信息" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="收益信息" name="third">角色管理</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      circleUrl: [],
      employeeId: []
    }
  },
  created() {
    this.findIdemployee()
  },
  methods: {
    // 给返回按钮绑定事件
    back() {
      this.$router.back()
    },

    // 点击头部标签页绑定事件
    handleClick(tab, event) {
      console.log(tab, event)
    },

    // 根据id获取该用户的个人信息
    findIdemployee() {
      var id = this.$route.query.id
      console.log(id)
      this.$axios.get('/waiter/findWaiterById', { params: { id }}).then(response => {
        this.employeeId = response.data.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#employeesdetails{
  padding: 20px;
  line-height: 50px;
  .el-col{
    margin-left: 150px;
    display: inline-block;
  }
}
.employeesdetails-center{
    margin-left: 150px;
    // color: red;
}
</style>
